<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/view/common/taglibs.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${appname}-<c:if test="${!empty sessionScope._local_node_session}">${sessionScope._local_node_session.nodeName}-</c:if>${si:ctname("NET_TYPE",sessionScope._netType)}</title>
<%@ include file="/WEB-INF/view/common/css_js_ace.jsp"%>
<link rel="stylesheet"
	href="${ctx}/static/FusionCharts/Contents/Style.css" type="text/css" />
<script type="text/javaScript"
	src="${ctx}/static/FusionCharts/JSClass/FusionCharts.js"></script>
<script type="text/javaScript" src="${ctx}/static/js/si.util.js"></script>
<script type="text/javascript">
	jQuery(function($) {
		putDate();
		stat();
	});
	//发送统计
	function sendChart() {
		$
				.ajax({
					type : "POST",
					dataType : "json",
					cache : false,
					url : _ctx + "/stat/stat_total.do?date="
							+ new Date().getTime(),
					data : {
						"timeType" : $("input[name='time_type']:checked").val(),
						"level" : $("#level").val(),
						"ownerid" : $("#ownerId").val(),
						"time" : $(
								"#"
										+ $("input[name='time_type']:checked")
												.val()).val(),
						"dataTransType" : "send"
					},
					success : function(content) {
						if (content.status == '1') {
							var chart = new FusionCharts(
									"${ctx}/static/FusionCharts/Charts/ScrollStackedColumn2D.swf",
									"ChartId", $("#sendchartdiv").width() - 30,
									"300", "0", "0");
							chart.setDataXML(content.data);
							chart.render("sendchartdiv");
						} else {
							ui.msg(content.msg, 0);
						}
					},
					error : function() {
						//ui.msg('信息加载错误', 0);
					}
				});
	}
	function recvChart() {
		$
				.ajax({
					type : "POST",
					dataType : "json",
					cache : false,
					url : _ctx + "/stat/stat_total.do?date="
							+ new Date().getTime(),
					data : {
						"timeType" : $("input[name='time_type']:checked").val(),
						"level" : $("#level").val(),
						"ownerid" : $("#ownerId").val(),
						"time" : $(
								"#"
										+ $("input[name='time_type']:checked")
												.val()).val(),
						"dataTransType" : "recv"
					},
					success : function(content) {
						if (content.status == '1') {
							var chart = new FusionCharts(
									"${ctx}/static/FusionCharts/Charts/ScrollStackedColumn2D.swf",
									"ChartId", $("#recvchartdiv").width() - 30,
									"300", "0", "0");
							chart.setDataXML(content.data);
							chart.render("recvchartdiv");
						} else {
							ui.msg(content.msg, 0);
						}
					},
					error : function() {
						//ui.msg('信息加载错误', 0);
					}
				});
	}
	function change() {
		$("#node").css("display", "none");
		$("#domain").css("display", "none");
		$("#sys").css("display", "none");
		$("#" + $("#level").val()).css("display", "");
		if ($("#level").val() == "node") {
			$("#ownerId").val('${node.id }');
		} else {
			$("#" + $("#level").val() + " option:first").prop("selected",
					'selected');
			$("#ownerId").val($("#" + $("#level").val()).val());

		}
	}
	function changeDomain() {
		$("#ownerId").val($("#domain").val());
	}
	function changeSys() {
		$("#ownerId").val($("#sys").val());
	}
	function changeTime() {
		$("#month").css("display", "none");
		$("#year").css("display", "none");
		$("#" + $("input[name='time_type']:checked").val()).css("display", "");
		putDate();
	}
	function putDate() {
		var timetype = $("input[name='time_type']:checked").val();
		var now;
		if (timetype == "month") {
			now = $.now().substring(0, 7);
		} else {
			now = $.now().substring(0, 4)
		}
		$("#" + $("input[name='time_type']:checked").val()).val(now);
	}
	function stat() {
		var time = $("#" + $("input[name='time_type']:checked").val()).val();
		var level = $("#level").val();
		if ('${nodeAdmin}' == 0) {
			level = "sys";
			$("#ownerId").val('${ownId }');
			$("#level").val(level);
		}
		var text;
		if (level == "node") {
			text = "本节点";
			$("#ownerId").val('${node.id }');
		} else if (level == "sys") {
			text = $("#sys").find("option:selected").text();
		} else {
			text = $("#domain").find("option:selected").text();
		}
		var html = time + "  发送量（" + text + "）";
		var html2 = time + "  接收量（" + text + "）";
		$("#sendtitletext").html(html);
		$("#recvtitletext").html(html2);
		sendChart();
		recvChart();

	}
</script>
</head>
<body>
	<%@ include file="/WEB-INF/view/common/topbar.jsp"%>
	<div class="main-container" id="main-container">
		<div class="main-container-inner">
			<%@ include file="/WEB-INF/view/common/sidebar.jsp"%>
			<div class="main-content">
				<div class="breadcrumbs" id="breadcrumbs">
					<ul class="breadcrumb">
						<li><i class="icon-home home-icon"></i> <a href="#">首页</a></li>
						<li><a href="#">综合统计</a></li>
						<li class="active">本节点交换统计</li>
					</ul>
				</div>
				<div class="page-content">
					<div class="row">
						<div class="col-xs-12">
							<div class="widget-box" style="border-top: 1px solid #CCC;">

								<div class="widget-body">
									<div class="widget-main">

										<div class="row">
											<div class="col-xs-4">
												<div class="input-group clearfix">
													<span class="input-group-addon ">统计时间 <input
														type="radio" name="time_type" class="ace"
														onchange="changeTime();" value="year"> <span
														class="lbl">年</span> <input type="radio" name="time_type"
														class="ace" onchange="changeTime();" value="month"
														checked="checked"> <span class="lbl">月</span> </span> <span
														class="input-icon input-icon-right width-100"> <input
														type="text" class="form-control" id="year" class="ace"
														style="display: none;"
														onfocus="WdatePicker({onpicked:function(){endCreated.focus();},dateFmt:'yyyy',maxDate:'%y'})" />
														<input type="text" class="form-control" id="month"
														onfocus="WdatePicker({onpicked:function(){endCreated.focus();},dateFmt:'yyyy-MM',maxDate:'%y-%M'})" />
														<i class="icon-calendar blue" id="time_icon"></i> </span>

												</div>
											</div>
											<div class="col-xs-3"
												style="<c:if test='${nodeAdmin eq 0 }'>display:none;</c:if>">
												<div class="input-group">
													<span class="input-group-addon">统计级别</span> <select
														class="form-control search-query" id="level" name="level"
														onchange="change();">
														<option value="node">节点</option>
														<option value="domain">业务域</option>
														<option value="sys">系统</option>
													</select>
												</div>
											</div>
											<div class="col-xs-4">
												<div class="input-group ">
													<div
														style="<c:if test='${nodeAdmin eq 0 }'>display:none;</c:if>">
														<select class="form-control search-query" id="domain"
															name="domain" onchange="changeDomain();"
															style="display: none;">
															<c:forEach var="domain" items="${ domainList}">
																<option value="${domain.id }">${domain.name }</option>
															</c:forEach>
														</select> <select class="form-control search-query" id="sys"
															name="sys" onchange="changeSys();" style="display: none;">
															<c:forEach var="sys" items="${ sysList}">
																<option value="${sys.id }"
																	<c:if test='${ownId eq sys.id }'> selected="selected"</c:if>>${sys.sysName
																	}</option>
															</c:forEach>
														</select>
													</div>
													<span class="input-group-btn">
														<button type="button" class="btn btn-purple btn-sm"
															style="height:32px;" onclick="stat();">
															<i class="icon-bar-chart icon-on-right bigger-110"></i>统计
														</button> </span> <input type="hidden" id="ownerId" name="ownerId"
														value="${ param.ownerId}">
												</div>
											</div>

										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-12">
										<h4 class="header smaller lighter blue">
											<i class="icon-bar-chart orange"></i>&nbsp;&nbsp;<label
												id="sendtitletext"></label>
										</h4>
									</div>
									<div class="col-xs-12">
										<div class="tabbable">
											<div id="sendchartdiv" align="center" class="tab-content"></div>
										</div>
									</div>
								</div>
								<div class="row">
									<div class="col-sm-12">
										<h4 class="header smaller lighter blue">
											<i class="icon-bar-chart orange"></i>&nbsp;&nbsp;<label
												id="recvtitletext"></label>
										</h4>
									</div>
									<div class="col-xs-12">
										<div class="tabbable">
											<div id="recvchartdiv" align="center" class="tab-content"></div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
</body>
</html>
